<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1, user-scalable=no" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/pc/css/media.css"/>
    <link rel="stylesheet" type="text/css" href="/pc/css/common.css"/>

    <title>物理机</title>
    <link href="/pc/css/mui.picker.css" rel="stylesheet" />
    <link href="/pc/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/pc/css/index.css"/>
    <script src="//do.yunzhijia.com/pub/js/qingjs.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/pc/css/index.css"/>
    <script src="/pc/js/jquery-3.0.0.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

</head>
<body style="background: #eaeff3;>
<div class="main_div">
<div class="main_body">

    <p class="topTip_p">客户经理折扣为6折。</p>
    <div class="listing">
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/pc/image/zhuanshuyun.png" width="20px"; height="15px">
                </i></div>
                <h4 class="title">*实例配置</h4>
                <ul class="config_ul">
                    <li id='showShiLiPicker'>
                        <span class="left" id="wuliji_span">2路8核128GB内存6*600GB 本地SAS盘</span>
                        <div class ="right_Div_wuliji">
                        <i class="_icon_zsy_wlj left" >
                            <img src="/pc/image/go_right.png">
                        </i>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li><span id = "shiLiCount" value="1">2路8核128GB内存6*600GB 本地SAS盘</span></li>
                </ul>
                <p class="price_p right " id="shili_price">￥6000</p>
            </div>
        </div>
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/pc/image/fuwuqianquan.png" width="20px"; height="15px">
                </i></div>
                <h4 class="title">存储</h4>
                <ul class="config2_ul" id="list">
                    <li data-stat="1">
                        <div class="_config_div left add" id="showstoragePicker">
                            <span class="left" id="storageResult">SATA</span>
                            <i class="right"><img src="/pc/image/go_right.png" ></i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1">
                                <i>
                                    <img src="/pc/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou" value="0">
                            <div class="stat_plus plus1">
                                <i>
                                    <img src="/pc/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                    <li class="addConfig"><i><img src="/pc/image/Group_PLUS.png"></i></li>
                </ul>
            </div>
            <#--<div class="summary_div">
                <ul class="configInfo_ul left">
                    <li>CPU *<span id = "cpuCount" value="1">1</span></li>
                    <li><span id="MemoryCount" value="1">1</span>GB</li>
                </ul>
                <p class="price_p right " id="">￥53</p>
            </div>-->
            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li class="tatil_stat"></li>
                </ul>
                <p class="price_p right" id="stat_total_price">￥0.00</p>
            </div>
        </div>
    </div>
</div>
<#include "foot.ftl">
<#--//九个计算值
        //CPU-->
<input type="hidden" id="total_cpu_t" name="total_cpu_t" value="0">
<input type="hidden" id="total_cpu_a" name="total_cpu_a" value="0">
<input type="hidden" id="total_cpu_d" name="total_cpu_d" value="6000">


<#--//存储-->
<input type="hidden" id="total_stat_t" name="total_stat_t" value="0">
<input type="hidden" id="total_stat_a" name="total_stat_a" value="0">
<input type="hidden" id="total_stat_d" name="total_stat_d" value="0">

<#--//带宽-->
<input hidden id="price_two" name="price_two" value="0">
<input type="hidden" id="tx_sata_tag" name="tx_sata_tag" value="0">

<input type="hidden" name="flag" id="flag" value="0">
<input type="hidden" name="flagNum" id="flagNum" value="0">
<input type="hidden" name="flag_die" id="flag_die" value="1">
<input type="hidden" name="flag_die_flag" id="flag_die_flag" value="1">
<input type="hidden" name="title" id="title" value="${title}">
<input type="hidden" name="openId" id="openId" value="${openId}">
</div>
<script src="/pc/js/mui.min.js"></script>
<script src="/pc/js/mui.poppicker.js"></script>
<script src="/pc/js/mui.picker.min.js"></script>
<script src="/pc/js/yun_title.js"></script>
<script>
    $("#ali_price").text("无此规格");
    $("#tx_price").text("无此规格");
    function  getAllPrice() {
        var top_price=parseFloat($('#total_cpu_d').val());
        var price=parseFloat($("#price_two").val());
        $("#allprice").text("￥"+(price+top_price).toFixed(2));

    };
    function count() {
        var stat_name=new Array();
        var stat_num=new Array();
        var index=0;
        $('#list li[data-stat]').each(function () {
            stat_name[index]=$(this).find("span").text();
            stat_num[index]=$(this).find("input").val();
            index++;

        });

        //计算价格
        getstat_num_price(stat_name,stat_num);
        //统计个数
        $('.tatil_stat').html(getstat_name_count(stat_name));


    };
    function getstat_num_price(stat_name,stat_num) {
        var d_sata_price=0;
        var d_ssd_price=0;
        var d_sas_price=0;

        var ali_sata_price=0;
        var ali_ssd_price=0;
        var ali_sas_price=0;

        var tx_sata_price=0;
        var tx_ssd_price=0;
        var tx_sas_price=0;


        var temp=0.00;
        var total_price=0.00
        var ali_total_price=0.00;
        var tx_total_price=0.00;


        var ali_stat_price=document.getElementById("total_stat_a");
        var tx_stat_price=document.getElementById("total_stat_t");
        var temp1=0.00;
        var temp2=0.00;
        var tag=document.getElementById('tx_sata_tag');
        for(var i=0;i<stat_name.length;i++){
            if(stat_name[i]=="SATA"){
                d_sata_price=0.02;
                ali_sata_price=0.27;
                tx_sata_price=0;
                temp=(d_sata_price*stat_num[i]).toFixed(2);
                total_price=parseFloat(parseFloat(total_price)+parseFloat(temp)).toFixed(2);

                temp1=(ali_sata_price*stat_num[i]).toFixed(2);
                ali_total_price=parseFloat(parseFloat(ali_total_price)+parseFloat(temp1)).toFixed(2);
                ali_stat_price.value=ali_total_price;
            }
            else if(stat_name[i]=="SSD"){
                d_ssd_price=1.00;
                ali_ssd_price=0.8;
                tx_ssd_price=1.1;
                temp=(d_ssd_price*stat_num[i]).toFixed(2);
                total_price=parseFloat(parseFloat(total_price)+parseFloat(temp)).toFixed(2);

                temp1=(ali_ssd_price*stat_num[i]).toFixed(2);
                ali_total_price=parseFloat(parseFloat(ali_total_price)+parseFloat(temp1)).toFixed(2);
                ali_stat_price.value=ali_total_price;

                temp2=(tx_ssd_price*stat_num[i]).toFixed(2);
                tx_total_price=parseFloat(parseFloat(tx_total_price)+parseFloat(temp2)).toFixed(2);
                tx_stat_price.value=tx_total_price;
                /*tag.value=(0);*/
            }
            else if(stat_name[i]=="SAS"){
                d_sas_price=0.04;
                ali_sas_price=0.35;
                tx_sas_price=0.3;
                temp=(d_sas_price*stat_num[i]).toFixed(2);
                total_price=parseFloat(parseFloat(total_price)+parseFloat(temp)).toFixed(2);


                temp1=(ali_sas_price*stat_num[i]).toFixed(2);
                ali_total_price=parseFloat(parseFloat(ali_total_price)+parseFloat(temp1)).toFixed(2);
                ali_stat_price.value=ali_total_price;

                temp2=(tx_sas_price*stat_num[i]).toFixed(2);
                tx_total_price=parseFloat(parseFloat(tx_total_price)+parseFloat(temp2)).toFixed(2);
                tx_stat_price.value=tx_total_price;
                /*tag.value=(0);*/

            }
        }
        tag.value=(0);
        for(var i=0;i<stat_name.length;i++){
            if(stat_name[i]=="SATA"&&stat_num[i]!="0"){
                tag.value=(404);
            }
        }
        //total_price=parseInt(d_sata_price)+parseInt(d_ssd_price)+parseInt(d_sas_price);
        $('#stat_total_price').text("￥"+total_price);
        var price_two=document.getElementById('price_two');
        price_two.value=total_price;

        getAllPrice();

    }
    function getstat_name_count(_arr) {
        var _res = []; //
        _arr.sort();
        for (var i = 0; i < _arr.length;) {
            var count = 0;
            for (var j = i; j < _arr.length; j++) {
                if (_arr[i] == _arr[j]) {
                    count++;
                }
            }
            _res.push([_arr[i], count]);
            i += count;
        }
        //_res 二维数维中保存了 值和值的重复数
        var _newArr = [];
        for (var i = 0; i < _res.length; i++) {
            // console.log(_res[i][0] + "重复次数:" + _res[i][1]);
            _newArr.push(_res[i][0] + '*' + _res[i][1]+'  ');
        }
        return _newArr;
    }
    mui(".config2_ul").on('tap', '.delet', function(event){
        var name=$(this).parent().attr("class");
        console.log(name);

        $("."+name).remove();
        count();

    });
    var index=1;
    //用于生成uuid
    function S4() {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    function guid() {
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    };
    // 按钮的点击事件
    $(".addConfig").click(function(){
        var uuid = "zhu"+guid();
        console.log(uuid);
        index++;
        var html = "";
        html =  '<li class='+uuid+' data-stat="'+index+'">'+
                '<div class="_config_div left add" id="but'+uuid+'">'+
                '<span class="left stat_text">SATA</span>'+
                '<i class="right "><img src="/pc/image/go_right.png"></i>'+
                '</div>'+
                '<div class="_config_div wid35 left zhuiRou">'+
                '<div class="stat_minus minus1"><i><img src="/pc/image/Group_MINUS.png" class="img_class"></i>'+
                '</div>'+
                '<input type="tel" pattern="[0-9]*" maxlength="4" class="stat_num input_bg1 zhou" value="0">'+
                '<div class="plus1 stat_plus"><i><img src="/pc/image/Group_PLUS.png" class="img_class"></i></div>'+
                '</div>'+
                '<div class="delet right"><img src="/pc/image/Shape.png"></div>'+
                '</li>';

        $(this).before(html);

        //生成选择框
        getPicker(uuid);
       count();
    });

    function getPicker(uuid) {
        var storage="story"+uuid;
        storage  = new mui.PopPicker();
        storage.setData(['SATA','SAS','SSD']);
        var showStoragePicker = document.getElementById('but'+uuid);
        var storageResult = document.getElementById('storageResult');

        showStoragePicker.addEventListener('tap', function(event) {
            console.log(event);
            var priceEditor = this.children[0];

            /*var priceEditor = event.target.children[0];*/
            console.log(priceEditor);
            storage.show(function (items) {
                priceEditor.innerHTML=items[0];
                count();
            });
        });

    }

    (function($, doc) {
        $.init();
        $.ready(function() {
            count();
            getAllPrice();
            //实例配置
            var shiLiPicker = new $.PopPicker();
            shiLiPicker.setData(
                [{value:6000,text:'2路8核128GB内存6*600GB本地SAS盘'},
                {value:10000,text:'4路8核256GB内存6*600GB本地SAS盘'}
                ]
            );
            var showShiLiPickerButton = doc.getElementById('showShiLiPicker');
            var shili_price = doc.getElementById('shili_price');
            var shiLiCount= doc.getElementById("shiLiCount");
            var wuliji_span= doc.getElementById("wuliji_span");
            var total_cpu_d = doc.getElementById('total_cpu_d');
            //初始化计算价格
            //getEntityPrice(cpuCount_f.innerText,MemoryCount_f.innerText);
            //CPU点击事件
            showShiLiPickerButton.addEventListener('tap', function(event) {
                shiLiPicker.show(function(items) {
                    wuliji_span.innerText = items[0].text;
                    shiLiCount.innerText = items[0].text;
                    shili_price.innerHTML="￥"+items[0].value;
                    total_cpu_d.value=items[0].value;
                    getAllPrice();
                });



            }, false);


            //存储下拉框storageResult
            var storagePicker = new mui.PopPicker();
            storagePicker.setData(['SATA','SAS','SSD']);
            var showstoragePicker = doc.getElementById('showstoragePicker');
            var storageResult = doc.getElementById('storageResult');
            console.log(document === doc);

            showstoragePicker.addEventListener('tap', function(event) {
                console.dir(this);
                console.log(this === showstoragePicker);
                var self = this;
                storagePicker.show(function (items) {
                    console.dir(items);
                    self.children[0].innerHTML = items[0];
                    count();
                });
            });
        });
    })(mui, document);
    $('#list').on("blur",'.stat_num',function (event) {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;
        }
        if(num<=0||num==""){
            $(this).val(0);
            //$('.stat_num')
            count();
        }
        else if(num>=2000){
            $(this).val(2000);
            count();
        }
        else {
            $(this).val(num);
            count();
        }
    });
    $('#list').on('click','.stat_plus',function (event) {
        console.dir(this);
        var numInput = $(this).prev();
        var stat_num=parseInt(numInput.val());
        if(stat_num>=2000){
            numInput.val(2000);
            count();
        }
        else {
            stat_num=stat_num+1;
            numInput.val(stat_num);
            count();
        }
    });
    $('#list').on('click','.stat_minus',function (event) {
        console.dir(this);
        var numInput = $(this).next();
        var stat_num=parseInt(numInput.val());
        if(stat_num<=0){
            numInput.val(0);
            count();
        }
        else {
            stat_num=stat_num-1;
            numInput.val(stat_num);
            count();
        }
    });

    $('.checkInfo_right').click(function () {
        var openId=$('#openId').val();
        //VCPU
        var shiLiPz=$('#shiLiCount').text().substring(0,11);
        var CunChu=$('.tatil_stat').text();
        var yuanJia=$('#shiLiCount').text().substring(11,($('#shiLiCount').text().toString().length));
        //三个价格
        var aliprice=$('#ali_price').text();
        var txprice=$('#tx_price').text();
        var allprice=$('#allprice').text();
        if(aliprice=="无此规格"){
            aliprice=0;
        }
        else {
            aliprice=aliprice.substring(1);
        }
        if(txprice=="无此规格"){
            txprice=0;
        }
        else {
            txprice=txprice.substring(1);
        }
        allprice=allprice.substring(1);

        var data1 = {
            cpuAndMem:shiLiPz,
            meMory:'',
            stat:yuanJia,
            brandNum:CunChu,

            ali_price:aliprice,
            tx_price:txprice,
            all_price:allprice,
            productTypeId:6,//物理机6
            productName:'物理机',
            oneKey:'实例配置',
            twoKey:'实例配置',
            threeKey:'存储',
            disCount:'1',
            oneImage:'list_icon11',
            twoImage:'list_icon8',
            threeImage:'list_icon4'
        }
        $.post("/takeList/"+openId+"/",data1,function(data){
            if(data.type=="success"){
                layer.msg(data.msg);
            }
        });
    });



</script>


</body>

</html>
